<!-- 党费缴纳 -->
<template>
  <div>
     <van-nav-bar
      title="党费缴纳"
      left-arrow
      @click-left="goBack()"
    />
    <!-- 通知缴纳党费 -->
    <div v-if="payment.nopayfee" class="noticePayment border-bottom-one-rem">
      <div>
        <img class="noticePayment_img" src="../../assets/smallBell.png" alt="">
        {{payment.nopayfee}}
      </div>
      <div class="button" @click="goPay(payment.url)">交党费</div>
    </div>
    <!-- 总量 -->
    <div class="total">
      <div>
        <div class="totalNumber">{{payment.sumamount}}</div>
        <div class="totalText">总金额（元）</div>
      </div>
    </div>
    <!-- 柱状图 -->
    <div class="histogram border-bottom-one-rem">
      <histogram :bar='payment.bar'></histogram>
    </div>
    <!-- table -->
    <div class="tableDiv">
      <noSencondLevelTable :tableData="tableData"></noSencondLevelTable>
      <div v-if="tableData.tbody.length>=8" class="lookMore" @click="lookMore">
        {{isMore?'查看更多':'收起'}}
        <span class="iconSpan"><svg-icon :icon-class="isMore?'xiala':'shouqi'"></svg-icon></span>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/index.js'
import histogram from '../canvas/histogram'
import noSencondLevelTable from '../components/noSencondLevelTable'
export default {
  components: {histogram,noSencondLevelTable},
  data() {
  return {
      data:{
        "methodName":"partyfeeDetail",
        "serviceName":"PersonalPartyfee",                          
        "usercode":"",
        roleid:''                                                  
      },
      tableRequestData:{
        "methodName":"feeList",
        "serviceName":"PersonalPartyfee",
        "pageindex":"1",                              
        "pagesize":"8",                          
        "usercode":""                                                   
      },
      payment:{nopayfee:''},
      isMore:true,
      tableData:{
        thead:[
          {prop:'yearMonths',label:'月份'},
          {prop:'oughtamount',label:'应交'},
          {prop:'amount',label:'已交'},
          {prop:'confirmtime',label:'缴纳时间'},
          {prop:'paystatus',label:'状态'},
        ],
        tbody:[],
        index1Color:'#BB383E',
        index2Color:'#058F1C'
      },
    };
  },
  created(){
    this.getLocalData()
    this.partyfeeDetail()
    this.feeList()
  },
  methods: {
    partyfeeDetail(){
      getUserInfo(this.data).then(res=>{
        if (res.status == '1') {
          this.payment = res.data
        }
      })
    },
    goBack(){
      console.log(this.$router.push('/'))
    },
    feeList(){
      getUserInfo(this.tableRequestData).then(res=>{
        if (res.status == '1') {
          let value = res.data.list
          if (this.isMore) { //查看更多
            this.tableData.tbody.push(...value)
            if (this.tableData.tbody.length%8==0) {
              this.isMore = true
            }else{
              this.isMore = false
            }
          } else{ // 收起
            this.tableData.tbody = value
            this.isMore = true
          }
        }
      })
    },
    goPay(url){
      window.location.href = url
    },
    getLocalData(){
      this.tableRequestData.usercode = window.localStorage.getItem('usercode')
      this.data.roleid = window.localStorage.getItem('roleId')
      this.data.usercode = window.localStorage.getItem('usercode')
    },
    lookMore(){ //查看更多|收起
      if(this.isMore){
        let pageindex = Number(this.tableRequestData.pageindex);
        pageindex += 1
        this.tableRequestData.pageindex = pageindex.toString()
      } else {
        this.tableRequestData.pageindex = '1'
      }
      this.feeList()
    }
  }
}
</script>
<style scoped>
.lookMore{
  color:#BB383E;
  text-align: center;
  font-size: 2rem;
  padding: 1rem 0;
}
.iconSpan{
  display: inline-block;
  height: 10px;
  width: 10px;
}
.total{
  text-align: right;
  padding: 0 3rem;
}
.tableDiv{
  padding: 0 3rem;
}
.total>div{
  display: inline-block;
}
.totalNumber{
  font-size:4.2rem;
  color:#BB383E;
  padding: 2.8rem 0 1.6rem;
}
.totalText{
  font-size: 2rem;
}
.noticePayment{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  height: 44px;
  font-size: 2.8rem;
  color: #BB383E;
}
.noticePayment div{
  display: flex;
  align-items: center;
}
.noticePayment_img{
  width: 17px;
  height: 17px;
  margin-right: 1.4rem;
}
.button{
  padding: 4px 10px;
  background: #BB383E;
  color: #ffffff;
  border-radius: 3px;
}
</style>